<template>
  <k-form-modal
    drawer
    width="640px"
    title="编辑订单"
    label-width="90px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="群峰订单ID">{{ state.model.out_trade_no }}</el-form-item>
    <el-form-item label="主账号">{{ state.model.nick_name }}</el-form-item>
    <el-form-item label="会员规格">{{ state.model.vip_title }}</el-form-item>
    <el-form-item label="付款金额">{{ formatPrice(state.model.amount ?? 0) }}</el-form-item>
    <el-form-item label="付款时间">{{ formatDateTime(state.model.pay_time) }}</el-form-item>
    <el-form-item label="付款方式">{{ payTypeMap[state.model.pay_type] }}</el-form-item>
    <el-form-item label="备注">
      <el-input v-model="state.model.order_note" type="textarea" :rows="3" placeholder="请输入备注" />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

import { payTypeMap } from '../hooks/use-table';
import { useFormModal } from '@crud/index';
import { updateOrder } from '@/api/crm-dyj/order';

import { formatPrice, formatDateTime } from '@/utils';

const emits = defineEmits(['after-submit']);
const formRef = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {},
  getParams: (model) => model,
  onShow: (mode = 0, data: any) => {
    if (mode === 0) {
      methods.resetModel();
    } else if (data) {
      state.model = { ...state.model, ...data };
    }
  },
  onSubmit: async (model, mode = 0) => {
    const { vip_order_id, order_note } = state.model;
    const res = await updateOrder({
      vip_order_id,
      order_note
    });
    if (!res.err) {
      ElMessage.success('更新成功');
      emits('after-submit');
    }
    return res;
  }
});
defineExpose({
  show: methods.show
});
</script>
